<template>
  <div class="g-card g-pad20">
    <el-form :inline="true" :model="query">
      <el-form-item label="员工名称">
        <el-input v-model="query.userName" clearable placeholder="客户名称"></el-input>
      </el-form-item>
      <el-form-item label="客户名称">
        <el-input v-model="query.customerName" clearable placeholder="客户名称"></el-input>
      </el-form-item>
      <el-form-item label="查找内容">
        <el-input v-model="query.contact" clearable placeholder="查找内容"></el-input>
      </el-form-item>
      <el-form-item label="时间范围">
        <el-date-picker
          clearable
          v-model="dateRange"
          type="daterange"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="消息状态">
        <el-select v-model="query.action" class="noborder">
          <el-option v-for="item in displayOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList(1)">查询</el-button>
        <el-button type="info" @click="resetFn">清空</el-button>
      </el-form-item>
      <el-form-item style="float: right;">
        <el-button type="primary" @click="exportList()">导出列表</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-table v-loading="loading" :data="fileData">
        <el-table-column prop="date" label="发送者" width="180">
          <template slot-scope="scope">
            <p v-if="scope.row">{{ scope.row.name }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="name" label=" 内容">
          <template slot-scope="{ row }">
            <ChatContent :message="row"></ChatContent>
          </template>
        </el-table-column>
        <el-table-column label="消息状态" width="200">
          <template slot-scope="scope">
            <div class="pers">
              <span v-if="scope.row.action == ''"> </span>
              <span v-else-if="scope.row.action == 'send'">
                <span class="green"></span>
                已发送
              </span>
              <span v-else-if="scope.row.action == 'recall'">
                <span class="red"></span>
                已撤回
              </span>
              <span v-else-if="scope.row.action == 'switch'">
                <span class="gay"></span>
                企业日志
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="发送时间" width="200">
          <template slot-scope="scope">
            {{ scope.row.msgTime }}
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="query.pageNum"
        :limit.sync="query.pageSize"
        @pagination="getList()"
      />
    </div>
  </div>
</template>
<script>
  import { getChatList, exportList } from '@/api/conversation/content.js'
  import ChatContent from '@/components/ChatContent'
  export default {
    components: { ChatContent },
    data() {
      return {
        query: {
          action: '',
          userName: '',
          customerName: '',
          contact: '',
          beginTime: '',
          endTime: '',
          pageNum: 1,
          pageSize: 10,
          orderByColumn: 't.msg_time',
          isAsc: 'desc' // asc 升序 desc 降序
        },
        dateRange: [],
        total: 0,
        fileData: [],
        floorRange: '全部',
        displayOptions: [
          {
            value: '',
            label: '全部'
          },
          {
            value: 'send',
            label: '已发送'
          },
          {
            value: 'recall',
            label: '已撤回'
          },
          {
            value: 'switch',
            label: '切回企业日志'
          }
        ],
        loading: false
      }
    },
    created() {
      this.getList()
    },
    methods: {
      resetFn() {
        this.dateRange = []
        this.query = {
          action: '',
          userName: '',
          customerName: '',
          contact: '',
          beginTime: '',
          endTime: '',
          pageNum: 1,
          pageSize: 10,
          orderByColumn: 't.msg_time',
          isAsc: 'desc'
        }
        this.getList(1)
      },
      getList(page) {
        if (this.dateRange) {
          this.query.beginTime = this.dateRange[0]
          this.query.endTime = this.dateRange[1]
        } else {
          this.query.beginTime = ''
          this.query.endTime = ''
        }
        page && (this.query.pageNum = page)
        this.loading = true
        getChatList(this.query)
          .then((res) => {
            this.fileData = res.rows
            this.total = ~~res.total
            this.loading = false
          })
          .catch(() => {
            this.loading = false
          })
      },
      parseMesContent(data, type) {
        let contact = JSON.parse(data)
        let typeDict = {
          text: 'content',
          image: 'attachment',
          text: 'content'
        }
        return contact[type]
      },
      exportList() {
        this.$confirm('是否确认导出所有数据项?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            return exportList(this.query)
          })
          .then((response) => {
            this.download(response.data)
          })
          .catch(function () {})
      }
    }
  }
</script>
<style lang="scss" scoped>
  .demo-form-inline {
    background: #f1f1f1;
    padding: 18px 10px 0 10px;
  }

  .content {
    margin-top: 15px;
    padding: 10px;
  }

  .pers {
    position: relative;

    .green {
      background: greenyellow;
      position: absolute;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      top: 10px;
      left: -8px;
    }

    .red {
      background: red;
      position: absolute;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      top: 10px;
      left: -8px;
    }

    .gay {
      background: gray;
      position: absolute;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      top: 10px;
      left: -8px;
    }
  }

  .noborder {
    ::v-deep .el-input--mini .el-input__inner {
      width: 2px;
      border: none;
    }
  }

  .emcode ::v-deep em {
    color: #ff0000;
  }
</style>
